<template>

  <div>
    <el-table
      :data="deliveries"
      border
      tooltip-effect="dark"
      v-loading="loading"
    >
      <el-table-column type="expand" label="详情">
        <template slot-scope="props">
          <el-table
            :data="props.row.details"
            tooltip-effect="dark"
            border
            stripe
          >
            <el-table-column
              label="订单编号"
              width="120" prop="sn">
            </el-table-column>
            <el-table-column
              label="商品信息"
              min-width="100">
              <template slot-scope="scope">
                <h-good-info-display v-model="scope.row" :displayInfo="false"/>
              </template>
            </el-table-column>
            <el-table-column
              label="商品规格"
              min-width="100"
            >
              <template slot-scope="scope">
                <h-specs-display v-model="scope.row"/>
              </template>
            </el-table-column>

            <el-table-column label="订单信息" min-width="200">
              <template slot-scope="scope">
                <h-order-info-display v-model="scope.row" :createTime="false"/>
              </template>
            </el-table-column>
            <el-table-column
              label="订单金额"
              min-width="150">
              <template slot-scope="scope">
                <h-order-pay-info-display v-model="scope.row"/>
              </template>
            </el-table-column>

            <el-table-column
              label="状态信息" width="120" align="center">
              <template slot-scope="scope">
                <h-order-status-display v-model="scope.row" :apply="true" :dispatch="true" :arrival="true"
                                        :pay="true"/>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        prop="sn"
        label="发货单号"
        width="120">
      </el-table-column>
      <el-table-column label="快递信息" width="140">
        <template slot-scope="scope">
          <div>
            <div><span style="padding: 0px 5px;"> {{scope.row.expressName}}</span></div>
            <a href="#" type="text" v-for="item in scope.row.expressPosts" :key="item"
               @click="showExpressLog(scope.row.expressCode,item)">{{item}}</a>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="nickName"
        label="买家信息"
        width="200">
        <template slot-scope="scope">
          <h-user-display v-model="scope.row.apply"></h-user-display>
        </template>
      </el-table-column>
      <el-table-column
        label="创建日期"
        width="160" prop="createTime">
      </el-table-column>
      <el-table-column
        label="联系信息"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <div>联系人: {{scope.row.concat}}</div>
          <div><span>联系电话: {{scope.row.mobile}}</span> <span>邮编: {{scope.row.zipcode}}</span></div>
          <div>联系地址: {{scope.row.district}} {{scope.row.address}}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="件数"
        width="50">
        <template slot-scope="scope">
          <span class="red">{{scope.row.num}}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="note">
      </el-table-column>
    </el-table>
    <div class="row">
      <div class="col h-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="search.pagination.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="search.pagination.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="search.pagination.total" class="float-right">
        </el-pagination>
      </div>
    </div>
    <h-post-log-dialog v-model="postInfo" :show.sync="showPostLogDialog" title="快递信息"></h-post-log-dialog>
  </div>
</template>
<script>
  import HContainer from 'src/components/shop/layout/Container'
  import HDateRangePicker from 'src/components/common/HDateRangePicker'
  import FrontService from 'src/service/front'
  import HOrderStatusDisplay from 'src/components/common/display/HOrderStatusDisplay'
  import HGoodInfoDisplay from 'src/components/common/display/HGoodInfoDisplay'
  import HSpecsDisplay from 'src/components/common/display/HSpecsDisplay'
  import HOrderInfoDisplay from 'src/components/common/display/HOrderInfoDisplay'
  import HOrderPayInfoDisplay from 'src/components/common/display/HOrderPayInfoDisplay'
  import HUserDisplay from 'src/components/common/display/HUserDisplay'
  import HPostLogDialog from 'src/components/common/dialog/HPostLogDialog'

  export default {
    name: 'HDeliveriedDisplay',
    components: {
      HContainer, HDateRangePicker, HOrderPayInfoDisplay, HPostLogDialog,
      HOrderStatusDisplay, HGoodInfoDisplay, HSpecsDisplay, HOrderInfoDisplay, HUserDisplay
    },
    props: {
      date: {
        type: Array
      },
      type: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        search: {
          date: [],
          sn: null,
          dispatch: 1,
          pagination: {
            total: 0,
            page: 1,
            limit: 10
          },
          needDetails: true,
          orderBy: 'id desc'
        },
        loading: false,
        deliveries: [],
        postInfo: null,
        showPostLogDialog: false
      }
    },
    watch: {
      type: function (c, d) {
        if (c == 2) {
          if (this.deliveries.length == 0) {
            this.getDatas();
          }
        }
      }
    },
    methods: {
      showExpressLog: function (code, post) {
        this.postInfo = {
          code: code,
          post: post
        }
        this.showPostLogDialog = true
      },
      handleSizeChange: function (size) {
        this.search.pagination.limit = size
        this.search.pagination.page = 1
        this.getDatas()
      },
      handleCurrentChange: function (page) {
        this.search.pagination.page = page
        this.getDatas()
      },
      getDatas: function () {
        const me = this
        me.loading = true
        FrontService.deliveries(me.search).then(ds => {
          if (ds != null) {
            me.deliveries = ds.datas
            me.search.pagination = ds.pagination
          }
          me.loading = false
        })
      },
      searchData: function () {
        this.search.pagination.page = 1;
        this.search.orderDate = this.date
        this.getDatas()
      }
    }
  }

</script>
